<template>
  <div>
    <el-menu
      :class="['menu']"
      default-active="2"
      class="el-menu-vertical-demo"
      :unique-opened="true"
      router
      :collapse="$store.state.userMenuData.menuShow"
      background-color="rgb(48, 65, 86)"
      text-color="#fff"
      @open="handleOpen"
      active-text-color="rgb(64, 158, 255)"
    >
      <div class="asditop" v-show="!$store.state.userMenuData.menuShow">
        <img src="@/assets/images/logo.png" alt="" class="asideImg" />
        <span 
          class="asideText"
          >e店邦O2O平台
        </span>
      </div>
      <div class="asditop" v-show="$store.state.userMenuData.menuShow">
        <img src="@/assets/images/logo.png" alt="" class="asideImg" />
      </div>
      <el-menu-item index="/">
        <i class="iconfont homepage"></i>
        <span class="home">首页</span>
      </el-menu-item>

      <el-submenu :index="'/' + p.path" v-for="p in menus" :key="p.name">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span class="leader">{{ p.meta.title }}</span>
        </template>
        <template v-for="sub in p.children">
          <el-menu-item
            v-if="!sub.children"
            :index="p.path + '/' + sub.path"
            :key="sub.name"
          >
            <i class="iconfont" :class="sub.meta.icon"></i>
            {{ sub.meta.title }}
          </el-menu-item>
          <template v-if="sub.children">
            <el-submenu :index="p.path + '/' + sub.path" :key="sub.path">
              <template slot="title">{{ sub.meta.title }}</template>
              <el-menu-item
                :index="p.path + '/' + sub.path + '/' + items.path"
                v-for="items in sub.children"
                :key="items.name"
                >{{ items.meta.title }}</el-menu-item
              >
            </el-submenu>
          </template>
        </template>
      </el-submenu>
    </el-menu>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: this.$store.state.route.menus,
    };
  },
  props: [],

  methods: {
    handleOpen() {},
  },
  computed: {},
  components: {},
  mounted() {
    console.log(this.$store.state.route);
  },
};
</script>
<style scoped lang='less'>
.menu {
  width: 200px;
  height: 100vh;
  .asditop {
    margin: 20px 0;
    margin-left: 20px;
    .asideImg {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;
    }
  }
  .asideText {
    color: #fff;
    font-weight: 800;

    font-size: 14px;
  }

  .leader {
    padding-right: 88px;
  }
  /deep/.el-menu-item {
    background-color: #1f2d3d !important;
  }

  .home {
    // padding-right: 70px;
    padding-left: 30px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
 
}
</style>